﻿@model MvcCms.Data.Project
@section HtmlHead{
}
<h2>Create</h2>
<div style="position:relative;">
<form id="form1" method="post" action="">
    <fieldset>
        <legend>Fields</legend>
        <div class="editor-label">
            @Html.LabelFor(model => model.Name)
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(model => model.Name)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.Description)
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(model => model.Description)
        </div>
        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
</form>
</div>
<div>
    @Html.ActionLink("Back to List", "Index")
</div>
@section ScriptContent{
<script src="@Url.Content("/areas/mvccmsprojecttracker/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script id="Validation" type="text/javascript">
        $("#form1").validate({
            rules: {
                Name: { required: true },
                Description: { required: true }
            },
            messages: {
                Name: "Name Required",
                Description: "Description Required"                
            },
            errorElement: "div",
            wrapper: "div",  // a wrapper around the error message
            errorPlacement: function (error, element) {
                offset = element.offset();
                error.insertAfter(element)
                error.addClass('message');
                error.css('position', 'absolute');
                error.css('width', 190);
                error.css('left', 220); 
                error.css('top', 0);
                var elementName = $(element).attr("name");
                switch (elementName) {
                    case "Name": 
                        error.css('top', 60);
                        break;
                    case "Description":
                        error.css('top', 110);
                        break;
                }
            }
        });
    </script>
}